# Textarea

## Import

```jsx
import { Textarea, TextareaField } from 'bumbag'
```

## Usage

```live
###tab=Default,type=jsx-live
<Textarea placeholder="Enter your name here..." />###

###tab=Filled,type=jsx-live
<Textarea placeholder="Enter your name here..." variant="filled" />###

###tab=Borderless,type=jsx-live
<Textarea placeholder="Enter your name here..." variant="borderless" />###

###tab=Underline,type=jsx-live
<Textarea placeholder="Enter your name here..." variant="underline" />###
```

## Label

```live
###tab=Default,type=jsx-live
<Textarea label="Username" />###

###tab=Filled,type=jsx-live
<Textarea label="Username" variant="filled" />###

###tab=Borderless,type=jsx-live
<Textarea label="Username" variant="borderless" />###

###tab=Underline,type=jsx-live
<Textarea label="Username" variant="underline" />###
```

If you want to have the label contained within the bounds of the textarea field, supply the `containLabel` prop:

```live
###tab=Default,type=jsx-live
<Textarea containLabel label="Username" />###

###tab=Filled,type=jsx-live
<Textarea containLabel label="Username" variant="filled" />###
```

### Fields

You can also use the `<TextareaField>` component, which internally has a [FieldWrapper](/form/field-wrapper) to wrap form controls such as labels, hint text and validation text.

It accepts a combination of [Textarea props](/form/textarea/#props) and [FieldWrapper props](/form/field-wrapper/#props).

```live
###tab=Default,type=jsx-live
<TextareaField label="Username" />###

###tab=Filled,type=jsx-live
<TextareaField label="Username" variant="filled" />###

###tab=Borderless,type=jsx-live
<TextareaField label="Username" variant="borderless" />###

###tab=Underline,type=jsx-live
<TextareaField label="Username" variant="underline" />###
```

### Default values

For uncontrolled inputs, set a default value using the `defaultValue` prop.

```live
###tab=Default,type=jsx-live
<Textarea defaultValue="Bumbags rock!" />###

###tab=Filled,type=jsx-live
<Textarea defaultValue="Bumbags rock!" variant="filled" />###

###tab=Borderless,type=jsx-live
<Textarea defaultValue="Bumbags rock!" variant="borderless" />###

###tab=Underline,type=jsx-live
<Textarea defaultValue="Bumbags rock!" variant="underline" />###
```

### Disabled

Make the input disabled with the `disabled` prop.

```live
###tab=Default,type=jsx-live
<Textarea disabled defaultValue="Bumbags rock!" />###

###tab=Filled,type=jsx-live
<Textarea disabled defaultValue="Bumbags rock!" variant="filled" />###

###tab=Borderless,type=jsx-live
<Textarea disabled defaultValue="Bumbags rock!" variant="borderless" />###

###tab=Underline,type=jsx-live
<Textarea disabled defaultValue="Bumbags rock!" variant="underline" />###
```

### Sizes

An input can come in different sizes - `small`, `medium`, `large`, or the default.

```live
###tab=Default,type=jsx-live
<>
  <Textarea size="small" />
  <Textarea />
  <Textarea size="medium" />
  <Textarea size="large" />
</>###

###tab=Filled,type=jsx-live
<>
  <Textarea size="small" variant="filled" />
  <Textarea variant="filled" />
  <Textarea size="medium" variant="filled" />
  <Textarea size="large" variant="filled" />
</>
###

###tab=Borderless,type=jsx-live
<>
  <Textarea size="small" variant="borderless" />
  <Textarea variant="borderless" />
  <Textarea size="medium" variant="borderless" />
  <Textarea size="large" variant="borderless" />
</>
###

###tab=Underline,type=jsx-live
<>
  <Textarea size="small" variant="underline" />
  <Textarea variant="underline" />
  <Textarea size="medium" variant="underline" />
  <Textarea size="large" variant="underline" />
</>
###
```

### States

An input can use different states (as per palette) such as `danger`, `success` and `warning`.

```live
###tab=Default,type=jsx-live
<>
  <Textarea state="danger" />
  <Textarea state="success" />
  <Textarea state="warning" />
  <Textarea state="primary" />
</>###

###tab=Filled,type=jsx-live
<>
  <Textarea state="danger" variant="filled" />
  <Textarea state="success" variant="filled" />
  <Textarea state="warning" variant="filled" />
  <Textarea state="primary" variant="filled" />
</>
###

###tab=Borderless,type=jsx-live
<>
  <Textarea state="danger" variant="borderless" />
  <Textarea state="success" variant="borderless" />
  <Textarea state="warning" variant="borderless" />
  <Textarea state="primary" variant="borderless" />
</>
###

###tab=Underline,type=jsx-live
<>
  <Textarea state="danger" variant="underline" />
  <Textarea state="success" variant="underline" />
  <Textarea state="warning" variant="underline" />
  <Textarea state="primary" variant="underline" />
</>
###
```

### Controlled Usage

The previous examples are examples of uncontrolled usage. To control the value yourself, use a combination of `onChange` and `value`.

Note: Do not use `defaultValue` with controlled inputs!

```function-live
function Example() {
  const [value, setValue] = React.useState('');

  return <Textarea onChange={e => setValue(e.target.value)} value={value} />
}
```

## Accessibility

#### Patterns

- If an input is required, then `aria-required` is set to `true` for the input.
- If an input is invalid, then `aria-invalid` is set to `true` for the input.

## Props

### Textarea Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">autoComplete</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">autoFocus</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Automatically focus on the textarea

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">containLabel</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">defaultValue</Code>** <Code fontSize="100" palette="primary">string | string[]</Code> 

Default value of the textarea

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Disables the textarea

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">label</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isRequired</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Makes the textarea required and sets aria-invalid to true

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">name</Code>** <Code fontSize="100" palette="primary">string</Code> 

Name of the textarea field

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">size</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"`}
</Code>

Alters the size of the textarea. Can be "small", "medium" or "large"

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">maxLength</Code>** <Code fontSize="100" palette="primary">number</Code> 

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">minLength</Code>** <Code fontSize="100" palette="primary">number</Code> 

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">multiple</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

This prop indicates whether the user can enter more than one value. This attribute only applies when the type attribute is set to email or file.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">pattern</Code>** <Code fontSize="100" palette="primary">string</Code> 

Regex pattern to apply to the textarea

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">placeholder</Code>** <Code fontSize="100" palette="primary">string</Code> 

Hint text to display

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">readOnly</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

This prop prevents the user from modifying the value of the textarea. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">spellCheck</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">step</Code>** <Code fontSize="100" palette="primary">string | number</Code> 

Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">state</Code>** <Code fontSize="100" palette="primary">string</Code> 

State of the textarea. Can be any color in the palette.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">textareaRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">textareaProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  unstable_system?: any;
  top?: any;
  right?: any;
  bottom?: any;
  left?: any;
  children?: string | number | boolean | {
     | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 47 more ... | (ReactPortal...`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">type</Code>** <Code fontSize="100" palette="primary">string</Code> 

Specify the type of textarea.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">value</Code>** <Code fontSize="100" palette="primary">string | number | string[]</Code> 

Value of the textarea

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onBlur</Code>** <Code fontSize="100" palette="primary">(event: FocusEvent&#60;HTMLTextAreaElement&#62;) =&#62; void</Code> 

Function to invoke when focus is lost

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onChange</Code>** <Code fontSize="100" palette="primary">(event: FormEvent&#60;HTMLTextAreaElement&#62;) =&#62; void</Code> 

Function to invoke when textarea has changed

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onFocus</Code>** <Code fontSize="100" palette="primary">(event: FocusEvent&#60;HTMLTextAreaElement&#62;) =&#62; void</Code> 

Function to invoke when textarea is focused

<Divider marginTop="major-2" marginBottom="major-2" />

### TextareaField Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">textareaProps</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`Pick<BoxProps, "unstable_system"
  | "top"
  | "right"
  | "bottom"
  | "left"
  | "children"
  | "defaultChecked"
  | "defaultValue"
  | "suppressContentEditableWarning"
  | "suppressHydrationWarning"
  | ... 647 more ...
  | "themeKey"> & LocalTextareaProps`}
</Code>

Additional props for the Textarea component

<Divider marginTop="major-2" marginBottom="major-2" />

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Textarea</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">autoComplete</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">autoFocus</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Automatically focus on the textarea

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">containLabel</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">defaultValue</Code>** <Code fontSize="100" palette="primary">string | string[]</Code> 

Default value of the textarea

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Disables the textarea

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">label</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isRequired</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Makes the textarea required and sets aria-invalid to true

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">name</Code>** <Code fontSize="100" palette="primary">string</Code> 

Name of the textarea field

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">size</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"`}
</Code>

Alters the size of the textarea. Can be "small", "medium" or "large"

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">maxLength</Code>** <Code fontSize="100" palette="primary">number</Code> 

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">minLength</Code>** <Code fontSize="100" palette="primary">number</Code> 

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">multiple</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

This prop indicates whether the user can enter more than one value. This attribute only applies when the type attribute is set to email or file.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">pattern</Code>** <Code fontSize="100" palette="primary">string</Code> 

Regex pattern to apply to the textarea

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">placeholder</Code>** <Code fontSize="100" palette="primary">string</Code> 

Hint text to display

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">readOnly</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

This prop prevents the user from modifying the value of the textarea. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">spellCheck</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">step</Code>** <Code fontSize="100" palette="primary">string | number</Code> 

Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">state</Code>** <Code fontSize="100" palette="primary">string</Code> 

State of the textarea. Can be any color in the palette.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">textareaRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">type</Code>** <Code fontSize="100" palette="primary">string</Code> 

Specify the type of textarea.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">value</Code>** <Code fontSize="100" palette="primary">string | number | string[]</Code> 

Value of the textarea

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onBlur</Code>** <Code fontSize="100" palette="primary">(event: FocusEvent&#60;HTMLTextAreaElement&#62;) =&#62; void</Code> 

Function to invoke when focus is lost

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onChange</Code>** <Code fontSize="100" palette="primary">(event: FormEvent&#60;HTMLTextAreaElement&#62;) =&#62; void</Code> 

Function to invoke when textarea has changed

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">onFocus</Code>** <Code fontSize="100" palette="primary">(event: FocusEvent&#60;HTMLTextAreaElement&#62;) =&#62; void</Code> 

Function to invoke when textarea is focused

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>FieldWrapper</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>
  | (({ elementProps }: { ...; }) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">description</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the description text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">hint</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the bottom hint text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isOptional</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Sets the optional flag (and displays optional text) on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">labelType</Code>** <Code fontSize="100" palette="primary">&#34;label&#34; | &#34;legend&#34;</Code> 

Sets the label type on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">tooltip</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the tooltip of the field wrapper. Can be either a string, or a React component.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">tooltipTriggerComponent</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the tooltip trigger component.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">validationText</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the bottom validation text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

## Theming

### Textarea

 <Theme
  component={'Textarea'}
  overrides={[
    'Textarea.styles.base',
    {key: 'Textarea.styles.placeholder', props: { placeholder: 'I am a placeholder' }},
    {key: 'Textarea.Wrapper.styles.base', props: { padding: 'major-2' }}
  ]} />

### TextareaField

 <Theme
  component={'TextareaField'}
  label="This is a label"
  overrides={[
    'TextareaField.styles.base'
  ]} />
